'use client';

import React from 'react';

interface TalkCardProps {
    talk: {
        title: string;
        event: string;
        date: string;
        link: string;
        video_url?: string;
        slides_url?: string;
        pdf_url?: string;
        description: string;
    };
}

// 格式化日期
function formatDate(dateString: string) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

export function TalkCard({ talk }: TalkCardProps) {
    const handleVideoClick = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        if (talk.video_url) {
            window.open(talk.video_url, '_blank');
        }
    };

    const handleSlidesClick = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        if (talk.slides_url) {
            window.open(talk.slides_url, '_blank');
        }
    };

    const handlePdfClick = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        if (talk.pdf_url) {
            window.open(talk.pdf_url, '_blank');
        }
    };

    const hasActions = talk.video_url || talk.slides_url || talk.pdf_url;

    return (
        <a
            href={talk.link}
            target="_blank"
            rel="noopener noreferrer"
            className="group block w-full rounded-xl border border-border bg-card hover:bg-accent/50 transition-all duration-300 p-6 hover:shadow-lg hover:-translate-y-1 hover:border-primary/20"
        >
            <div className="flex flex-col lg:flex-row gap-6">
                {/* 左侧内容区 */}
                <div className="flex-1 flex flex-col space-y-2">
                    <div className="flex items-start justify-between">
                        <h4 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors flex-1 pr-2">
                            {talk.title}
                        </h4>
                        <div className="text-muted-foreground group-hover:translate-x-1 group-hover:text-primary transition-all duration-300 flex-shrink-0 lg:hidden">
                            <svg
                                className="w-5 h-5"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                                />
                            </svg>
                        </div>
                    </div>
                    <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-sm text-muted-foreground">
                        <div className="flex items-center gap-1.5">
                            <svg
                                className="w-4 h-4 flex-shrink-0"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
                                />
                            </svg>
                            <span>{talk.event}</span>
                        </div>
                        <div className="flex items-center gap-1.5">
                            <svg
                                className="w-4 h-4 flex-shrink-0"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                                />
                            </svg>
                            <span>{formatDate(talk.date)}</span>
                        </div>
                    </div>
                    <p className="text-sm text-foreground/80 group-hover:text-foreground transition-colors">
                        {talk.description}
                    </p>
                </div>

                {/* 右侧按钮区 */}
                {hasActions && (
                    <div className="flex lg:flex-col gap-3 lg:justify-center lg:min-w-[140px]">
                        {talk.video_url && (
                            <button
                                onClick={handleVideoClick}
                                className="flex-1 lg:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-accent hover:bg-accent/80 rounded-lg transition-colors border border-border hover:border-primary/50"
                            >
                                <svg
                                    className="w-4 h-4 flex-shrink-0"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                                    />
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                    />
                                </svg>
                                <span>观看</span>
                            </button>
                        )}
                        {talk.slides_url && (
                            <button
                                onClick={handleSlidesClick}
                                className="flex-1 lg:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-accent hover:bg-accent/80 rounded-lg transition-colors border border-border hover:border-primary/50"
                            >
                                <svg
                                    className="w-4 h-4 flex-shrink-0"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
                                    />
                                </svg>
                                <span>幻灯片</span>
                            </button>
                        )}
                        {talk.pdf_url && (
                            <button
                                onClick={handlePdfClick}
                                className="flex-1 lg:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-foreground bg-accent hover:bg-accent/80 rounded-lg transition-colors border border-border hover:border-primary/50"
                            >
                                <svg
                                    className="w-4 h-4 flex-shrink-0"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                                    />
                                </svg>
                                <span>下载 PDF</span>
                            </button>
                        )}
                    </div>
                )}
            </div>
        </a>
    );
}
